import 'package:flutter/material.dart';
import 'package:flutter_app/pages/blind_box_details.dart';

import '../data/mock_data.dart';
import 'details.dart';
import 'prod_details.dart';

class Market extends StatelessWidget {
  const Market({super.key});

  @override
  Widget build(BuildContext context) {
    // 获取屏幕状态栏高度
    double statusBarHeight = MediaQuery.of(context).padding.top;
    // 获取屏幕宽度
    double screenWidth = MediaQuery.of(context).size.width;
    Size cardSize = Size.square((screenWidth - 12 * 2 - 8) / 2);
    print("statusBarHeight: $statusBarHeight");
    return Scaffold(
      body: Stack(
        children: [
          Column(
            children: [
              SizedBox(height: statusBarHeight),
              // 输入框
              Padding(
                padding: EdgeInsets.all(12),
                child: SizedBox(
                  height: 36,
                  child: TextField(
                    style: TextStyle(
                      fontSize: 16,
                    ),
                    textAlignVertical: TextAlignVertical.center,
                    decoration: InputDecoration(
                      prefixIcon: Icon(Icons.search, size: 20, color: Color(0xFFBFBFBF)),
                      hintText: "Search for collectibles",
                      hintStyle: TextStyle(
                        fontSize: 14,
                        color: Color(0xFFBFBFBF),
                        fontWeight: FontWeight.w500,
                      ),
                      contentPadding: EdgeInsets.fromLTRB(0, 8, 12, 8),
                      enabledBorder: OutlineInputBorder(
                        borderSide: BorderSide(width: 1, color: Color(0xFF1D2129)),
                        borderRadius: BorderRadius.circular(8),
                      ),
                      focusedBorder:OutlineInputBorder(
                        borderSide: BorderSide(width: 1, color: Color(0xFF1D2129)),
                        borderRadius: BorderRadius.circular(8),
                      ),
                    ),
                  ),
                ),
              ),
              // 分类按钮
              Row(
                children: [
                  TextButton(
                    onPressed: () {},
                    child: Text("COLLECTION", style: TextStyle(fontSize: 20, fontWeight: FontWeight.w700, color: Colors.black)),
                  ),
                  TextButton(
                    onPressed: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (BuildContext context) => const BlindBoxDetails(),
                        ),
                      );
                    },
                    child: Text("BLIND BOX", style: TextStyle(fontSize: 20, fontWeight: FontWeight.w700, color: Color(0xFF86909C))),
                  ),
                  TextButton(
                    onPressed: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (BuildContext context) => const Details(),
                        ),
                      );
                    },
                    child: Text("NEW", style: TextStyle(fontSize: 20, fontWeight: FontWeight.w700, color: Color(0xFF86909C))),
                  )
                ],
              ),
              // 帅选条件
              Padding(
                padding: EdgeInsets.symmetric(horizontal: 12),
                child: Row(
                  children: [
                    Container(
                      height: 30,
                      color: Color(0xFFF4F5FA),
                      child: TextButton(
                        onPressed: () {  },
                        style: ButtonStyle(
                          // WidgetStateProperty<OutlinedBorder?>? shape,
                          shape: WidgetStatePropertyAll(RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(4),
                            side: BorderSide(color: Color(0xFFF4F5FA), width: 1),
                          ))
                        ),
                        child: Text("Default", style: TextStyle(fontWeight: FontWeight.w700, fontSize: 14, color: Color(0xFF0E6BFE))),
                      ),
                    ),
                    SizedBox(width: 8),
                    Container(
                      color: Color(0xFFF4F5FA),
                      height: 30,
                      padding: EdgeInsets.only(left: 4),
                      child: DropdownButton<String>(
                        value: null,
                        hint: Text("Model", style: TextStyle(fontSize: 14, fontWeight: FontWeight.w700, color: Colors.black)),
                        style: TextStyle(fontWeight: FontWeight.w700, color: Colors.black),
                        borderRadius: BorderRadius.circular(4),
                        underline: SizedBox(height: 0), // 去除底部下划线
                        items: [
                          DropdownMenuItem(
                            value: "1",
                            child: Text("模型1"),
                          ),
                          DropdownMenuItem(
                            value: "2",
                            child: Text("模型2"),
                          ),
                          DropdownMenuItem(
                            value: "3",
                            child: Text("模型3"),
                          ),
                        ],
                        onChanged: (String? value) {
                          print("value: $value");
                        },
                      ),
                    ),
                    SizedBox(width: 8),
                    Container(
                      color: Color(0xFFF4F5FA),
                      height: 30,
                      padding: EdgeInsets.only(left: 4),
                      child: DropdownButton<String>(
                        value: null,
                        hint: Text("Price", style: TextStyle(fontSize: 14, fontWeight: FontWeight.w700, color: Colors.black)),
                        style: TextStyle(fontWeight: FontWeight.w700, color: Colors.black),
                        borderRadius: BorderRadius.circular(4),
                        underline: SizedBox(height: 0), // 去除底部下划线
                        items: [
                          DropdownMenuItem(
                            value: "1",
                            child: Text("\$100 ~ \$200"),
                          ),
                          DropdownMenuItem(
                            value: "2",
                            child: Text("\$200 ~ \$300"),
                          ),
                          DropdownMenuItem(
                            value: "3",
                            child: Text("\$300 ~ \$400"),
                          ),
                        ],
                        onChanged: (String? value) {
                          print("value: $value");
                        },
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
          Positioned(
            top: 180,
            left: 0,
            right: 0,
            bottom: 0,
            child: ListView(
              padding: EdgeInsets.symmetric(horizontal: 12),
              children: [
                Wrap(
                  spacing: 8,
                  runSpacing: 16,
                  children: MockData.imgList.map((item) => GestureDetector(
                    onTap: () {
                      Navigator.push(context, MaterialPageRoute(builder: (context) =>  new ProdDetailsDetails(img: item)));
                    },
                    child: Column(
                      children: [
                        Container(
                          width: cardSize.width,
                          height: cardSize.height,
                          margin: EdgeInsets.only(bottom: 4),
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(8),
                            image: DecorationImage(
                              image: NetworkImage(item),
                              fit: BoxFit.cover,
                            ),
                          ),
                        ),
                        Padding(
                          padding: EdgeInsets.symmetric(horizontal: 8),
                          child: ConstrainedBox(
                            constraints: BoxConstraints(
                              maxWidth: cardSize.width - 8 * 2,
                            ),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text('Mechanical 003', style: TextStyle(
                                  fontSize: 15,
                                  fontWeight: FontWeight.w700,
                                  color: Color(0xFF141519),
                                )),
                                SizedBox(height: 8),
                                Row(
                                  children: [
                                    Container(
                                      width: 30,
                                      height: 30,
                                      decoration: BoxDecoration(
                                        borderRadius: BorderRadius.circular(15),
                                        image: DecorationImage(
                                          image: NetworkImage(item),
                                          fit: BoxFit.cover,
                                        ),
                                      ),
                                    ),
                                    SizedBox(width: 4),
                                    Text("pheaio", style: TextStyle(
                                      fontSize: 13,
                                      fontWeight: FontWeight.w400,
                                      color: Color(0xFF86909C),
                                    )),
                                    Expanded(flex: 1, child: SizedBox()),
                                    Text("￥520", style: TextStyle(
                                      color: Color(0xFF000000),
                                      fontSize: 18,
                                      fontWeight: FontWeight.w700,
                                    )),
                                  ],
                                ),
                              ],
                            ),
                          ),
                        ),
                      ],
                    ),
                  )).toList(),
                ),
                SizedBox(height: 60),
              ],
            )
          ),
        ],
      ),
    );
  }
}
